<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Music Test</title>
    <link rel="stylesheet" href="styles/buttons.css"/>
    <script type="text/javascript" src="js/buttons.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="styles/jquery-ui.min.css"/>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <style type="text/css">
        ul {
            list-style: none;
        }

        ul li {
            margin: 10px;
        }

        #main {
            width: 600px;
            height: 400px;
            margin: 50px auto;
        }

        #main h2 {
            text-align: center;
        }

        .ui-progressbar {
            position: relative;
        }

        .progress-label {
            position: absolute;
            left: 50%;
            top: 4px;
            color: #dea;
            text-shadow: 1px 1px 0 #fff;
        }

        .ui-progressbar-value {
            background: green url("");
        }

        #progressbar {
            width: 300px;
            margin: 50px auto;
            border-radius: 60px
        }
    </style>
    <script>
        $(function () {
            var progressbar = $("#progressbar"),
                    progressLabel = $(".progress-label");
            progressbar.progressbar({
                value: false,
                change: function () {
                    progressLabel.text(progressbar.progressbar("value") + " pts");
                },
                complete: function () {
                    progressLabel.text("Complete!");
                }
            });
            /*
             function progress() {
                var val = progressbar.progressbar( "value" ) || 0;
                progressbar.progressbar( "value", val + 2 );
                if ( val < 99 ) {
                    setTimeout( progress, 80 );
                }
             }
             */
            function progress() {
                var val = progressbar.progressbar("value") || 100;
                progressbar.progressbar("value", val - 1);
                if (val > 1) {
                    setTimeout(progress, 100);
                }
            }

            setTimeout(progress, 0);
        });
    </script>
</head>
<body>

<div id="main">
    <h2>which song is correct?</h2>

    <div id="progressbar">
        <div class="progress-label">Loading...</div>
    </div>
    <audio id="music" src="music/${ans }.mp3" autoplay="autoplay" loop="loop"></audio>
    <h3>
        <script>
            //var a = document.getElementsByTagName("audio")[0];
            //document.getElementsByTagName("h3")[0].innerHTML = a.duration;//firefox work
            function check(name) {
                var cname = decodeURI(document.getElementById("music").src);
                //alert(cname);
                var score = document.getElementsByClassName("progress-label")[0].innerHTML;
                console.log(score);
                if (cname.indexOf(name) > 0) {
                    alert("Bingo You got " + score);
                } else {
                    alert("Oops Wrong answer");
                }
            }
        </script>
    </h3>
    <ul>
        <c:forEach var="op" items="${options }">
            <li><a href="javascript:void(0)" onclick="check('${op.name}')" class="button button-block button-rounded button-primary">${op.name}</a></li>
        </c:forEach>
    </ul>
</div>
</body>
</html>